import { useEffect } from 'react';
import './StudentVideoListPage.scss'
import VideoItem from './components/VideoItem/VideoItem';
import { useSelector } from 'react-redux';
import { fetchGetVideoList } from '@/store/modules/student';
import { useDispatch } from 'react-redux';


function StudentVideoListPage(){
    const { user_status } = useSelector(state => state.user);
    const { videoList } = useSelector(state => state.student);
    const dispatch  = useDispatch();
    
    useEffect(()=>{
        async function getVideoList(){
                await dispatch(fetchGetVideoList(user_status.class_id,user_status.token));
        }

        getVideoList();
    },[])


    return (
        <div className="StudentVideoListPage">
           {videoList.map((ele,index)=><VideoItem key={index} videoItemInfo={ele} />)}
        </div>
    )
}

export default StudentVideoListPage;